<template>
	<view class="container">
		<view class="content-date" v-for="(item,index) in pageList" :key="index">
			<view class="date">
				{{item.date}}
			</view>
			<view class="content-date-item" v-for="(sonItem,sonIndex) in item.list" :key="sonIndex">
				<view class="content-date-title">
					{{sonItem.time}}
				</view>
				<view class="content-ul">
					<view class="content-li flex align-center">
						<view class="label shrink-0">
							日工
						</view>
						<view class="work shrink-0" v-if="sonItem.type==1">
							上班：8.0小时
						</view>
						<view class="money">
							450.00
						</view>
					</view>
					<view class="content-li2 flex" v-if="sonItem.type==1">
						<view class="label">
						</view>
						<view class="work">
							加班：2.5小时
						</view>
						<view class="money">
						</view>
					</view>
				</view>
				<view class="content-bot" v-if="sonItem.type==1">
					<view class="content-bot-li flex  align-center">
						<view class="label">
							借支
						</view>
						<view class="work">
							1笔
						</view>
						<view class="money flex-1">
							450.00
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageList: [{
					date: '2024年5月',
					list: [{
						time: '2024年5月2日',
						type: 1
					}, {
						time: '2024年5月3日',
						type: 2
					}, {
						time: '2024年5月4日',
						type: 2
					}]
				}, {
					date: '2024年4月',
					list: [{
						type: 1,
						time: '2024年4月1日',
					}, {
						type: 2,
						time: '2024年4月3日',
					}, {
						type: 2,
						time: '2024年4月5日',
					}]
				}]
			};
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F3F5FA;
		min-height: 100vh;
		padding: 0 30rpx 20rpx 30rpx;

		.content-date {

			.date {
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
				padding: 32rpx 0 25rpx 22rpx;
			}

			.content-date-item {
				background: #FFFFFF;
				border-radius: 12rpx;
				margin-bottom: 20rpx;

				.content-date-title {
					font-weight: 500;
					font-size: 30rpx;
					color: #222222;
					height: 80rpx;
					line-height: 80rpx;
					box-shadow: 0rpx 5rpx 5rpx 0rpx rgba(224, 224, 224, 0.5);
					border-radius: 12rpx 12rpx 2rpx 2rpx;
					padding-left: 22rpx;
				}

				.content-ul {
					padding-bottom: 41rpx;

					.content-li {
						margin: 48rpx 29rpx 0 33rpx;
						.label {
							font-weight: bold;
							font-size: 30rpx;
							color: #222222;
							width: 112rpx;
						}

						.work {
							font-weight: 500;
							font-size: 30rpx;
							color: #222222;
						}

						.money {
							font-weight: bold;
							font-size: 30rpx;
							color: #222222;
							text-align: right;
							margin-left: auto;
						}
					}

					.content-li2 {
						margin-top: 24rpx;
						margin-left: 33rpx;

						.label {
							font-weight: bold;
							font-size: 30rpx;
							color: #222222;
							width: 112rpx;
						}

						.work {
							font-weight: 500;
							font-size: 30rpx;
							color: #222222;
						}
					}
				}

				.content-bot {
					border-top: 1px solid #EAEAEA;
					padding: 37rpx 0 38rpx 0;
					margin: 0 28rpx;

					.content-bot-li {

						.label {
							font-weight: bold;
							font-size: 30rpx;
							color: #222222;
							width: 112rpx;
						}

						.work {
							font-weight: 500;
							font-size: 30rpx;
							color: #222222;
						}

						.money {
							text-align: right;
							font-weight: bold;
							font-size: 30rpx;
							color: #222222;
						}
					}
				}
				&:last-child{
					margin-bottom: 0;
				}
			}
		}
	}
</style>